<template>
  <div>
    <div class="add-btn">
      <el-button type="primary" size="small" @click="showAddressDialog"><i class="el-icon-plus"></i> 添加新地址</el-button>
    </div>
    <div class="table-box">
      <ElTable refName="addressList" @pageChange="pageChange" :data-source="addressList" :data-config="tableConfig"
        :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
        <template #isDefault="{ scope }">
        <span class="color">{{
          scope.row.isDefault == 1
            ? "默认地址"
            : ""
        }}</span>
      </template>
        <template #operate="{ scope }">
          <el-button type="primary" size="mini" @click="editAddress(scope.row)">修改</el-button>
          <el-button size="mini" @click.native="deleteAddress(scope.row)">删除</el-button>
        </template>
      </ElTable>
    </div>
    <AddressEdit :isShowAddAddress="isShowAddAddress" :rowInfo="rowInfo" :title="title" @closeDialog="closeAddressDialog" />
  </div>
</template>

<script>
import {
  getAddressList,
  deleteAddress
} from "@/api/member/address";
import ElTable from "@/components/table/ElTable.vue";
import AddressEdit from "../access-manage/components/AddressEdit";
export default {
  props: {},
  data() {
    return {
      addressList: [],
      tableConfig: [
        {
          prop: "fullArea",
          label: "所在地区",
        },
        {
          prop: "address",
          label: "详细地址",
        },
        {
          prop: "fullName",
          label: "联系人",
        },
        {
          prop: "mobile",
          label: "联系方式",
        },
        {
          prop: "isDefault",
          label: "",
          selectOption: [
            { label: "", value: "0" },
            { label: "默认地址", value: "1" },
          ],
        },
        {
          prop: "operate",
          label: "操作",
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isShowAddAddress: false,
      title:"",
      rowInfo:{
        areaCode: [],
        areaId: "",
        address: "",
        fullName: "",
        mobile: "",
        isDefault: "0",
      },
      rules: []
    };
  },
  components: {
    ElTable,
    AddressEdit,
  },
  mounted() {
    this.getAddressList();
  },
  methods: {
    // 分页变化
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getAddressList();
    },
    // 地址列表
    getAddressList() {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      getAddressList(params)
        .then((res) => {
          this.addressList = res.data;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 删除地址
    deleteAddress(row) {
      this.$confirm("此操作将删除该地址, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteAddress(row.id).then((res) => {
            if (res.code === 200) {
              this.getAddressList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改地址
    editAddress(row) {
      this.title = '修改地址';
      this.rowInfo = row;
      this.isShowAddAddress = true;
    },    
    // 展开地址窗口
    showAddressDialog() {
      this.title = '添加地址';
      this.rowInfo = {};
      this.isShowAddAddress = true;
    },
    // 关闭地址窗口
    closeAddressDialog() {
      this.isShowAddAddress = false;
      this.getAddressList();
    },
  },
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 10px;
}
span.color{
  color:#f88123;
}
</style>
